<!--
 * @Author: your name
 * @Date: 2021-02-26 14:25:42
 * @LastEditTime: 2021-04-09 16:21:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /www/dtk_static_www_user_center/html/单页html/首页.html
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes">
    <meta content="yes" name="apple-mobile-web-app-capable"><meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <script type="text/javascript" src="https://public.ffquan.cn/lib/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/vue-lazyload.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/swiper/js/swiper.min.js"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/taobaoCode/taobaoCode.js?v=1.2.0"></script>
    <script type="text/javascript" src="https://public.ffquan.cn/lib/clipboard.min.js"></script>
    <link rel="stylesheet" href="https://public.ffquan.cn/lib/swiper/css/swiper.min.css">
    <title>高佣精选</title>
    <script>
        
        var _config = {
            appKey: 'jwbqfs',//此处替换成用户appKey
			jumpGoodsUrl: function (items) {   // 替换为详细页面的地址或转链逻辑 
				 wx.miniProgram.navigateTo({ url: '../../pagesA/pages/mallA/detail?pt=tb&goodsid=' + items.itemId })
			}
        };
    </script>
   
   <style>
        body{
            margin: 0;padding: 0;background: rgb(245, 245, 245);
        }
        .commission-container .main-title{
            background: rgb(189, 0, 255);position: fixed;height: .9rem;font-size: .36rem;color:#fff;left: 0;top: 0;text-align: center;width: 100%;line-height: .9rem;margin: 0;z-index: 9;
        }
        .commission-container .main-content{
            background: url(https://cmsstaticnew.haojiequ.com/dist/static/header_bg.747dcea0.png) no-repeat top / contain;width: 100%;min-height: 6rem;padding-bottom:1rem;
        }
        .commission-container .banner{
            width: 92%;margin: .9rem auto .2rem;display: block;border-radius: .12rem;
        }
        .commission-container .top-nav .swiper-slide {
            padding: 0 .2rem;font-weight: 500;font-size: .3rem;color: hsla(0,0%,100%,.6);position: relative;width: auto;padding-bottom: 8px;
        } 
        .commission-container .top-nav .swiper-slide.act {
            color: #fff;
        }
        .commission-container .top-nav .swiper-slide::after {
            content:'';width: 0;border-bottom: 2px solid #fff;position: absolute;bottom: 0px;left: 0;right: 0;margin: auto;
            transition: all .3s;
        }
        .commission-container .top-nav .swiper-slide.act::after {
            width: 50%;
        }
        .commission-container .goods-list-block{
            padding: 0;margin: 0;
        }  
        .commission-container .goods-list-block li{
            width: 7.1rem;background: #fff;border-radius: .16rem;padding: .18rem;margin: .2rem auto 0;position: relative;list-style: none;width: 90%;
        }
        .commission-container .goods-list-block li a{
            text-decoration: none;
        }
        .commission-container .goods-list-block li .productImg {
            float: left;margin-right: .2rem;position: relative;
        }
        .commission-container .goods-list-block li .productImg .imgPerch,.commission-container .goods-list-block li .productImg img {
            width: 1.84rem;height: 1.84rem;border-radius: .1rem;
        }
        .commission-container .goods-list-block li .title {
            height: .36rem;font-size: .26rem;font-family: PingFangSC-Regular,PingFang SC;color: #333;line-height: .36rem;overflow: hidden;text-overflow: ellipsis;
            white-space: nowrap;margin-bottom: .22rem;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-align-items: center;
            -ms-flex-align: center;align-items: center;
        }
        .commission-container .goods-list-block li .title .shoplabel {
            height: .26rem;float: left;
        }
        .commission-container .goods-list-block li .title .shoplabel img {
            height: 100%;display: block;
        }
        .commission-container .goods-list-block li .title span{
            overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: .05rem;
        }
        .commission-container .goods-list-block li .coupon {
            height: .24rem;background: linear-gradient(90deg,#ff8873,#ff4f4f);border-radius: .04rem;display: inline-block;line-height: .24rem;
            padding: 0 .06rem 0 .02rem;font-size: .19rem;font-family: PingFangSC-Regular,PingFang SC;color: #fff;display: -webkit-flex;
            display: -ms-flexbox;display: flex;-webkit-align-items: center;-ms-flex-align: center;align-items: center;width: -webkit-max-content;
            width: -moz-max-content;width: max-content;
        }
        .commission-container .goods-list-block li .coupon span {
            display: inline-block;font-size: .18rem;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #ff5351;
            line-height: .19rem;padding: 1px .04rem;background: #fff;border-radius: .02rem 0 0 .02rem;text-align: center;margin-right: .06rem;
        }
        .commission-container .goods-list-block li .price {
            font-size: .2rem;font-family: PingFangSC-Regular,PingFang SC;color: #fe3738;margin-top: .25rem;
        }
        .commission-container .goods-list-block li .juanPrice {
            font-size: .34rem;font-weight: 500;color: #fe3738;margin-right: .04rem;font-family: PingFangSC-Medium,PingFang SC;
        }
        .commission-container .goods-list-block li .originPrice{
            text-decoration: line-through;height: .26rem;font-size: .2rem;font-family: PingFangSC-Regular,PingFang SC;
            color: #999;line-height: .26rem;margin-left: .1rem;
        }
        .commission-container .goods-list-block li .shopName {
            height: .34rem;font-size: .22rem; font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #888;line-height: .32rem;
        }
        .commission-container .goods-list-block li .btn{
            width: 1.6rem;height: .68rem;background: linear-gradient(90deg,#d65dff,#fe4aeb);box-shadow: 0 0.04rem 0.06rem 0 rgb(235 73 251 / 25%);
            border-radius: 2rem .04rem .04rem 2rem;position: absolute;bottom: .24rem;right: -.08rem;border: 1px solid transparent;z-index: 1;
            padding-left: .28rem;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;
            flex-direction: column;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
        }
        .commission-container .goods-list-block li .btn span {
            font-size: .24rem;font-family: PingFangSC-Medium,PingFang SC;font-weight: 500;color: #fff;
        }
        .commission-container .goods-list-block li .btn span:last-child {
            font-size: .2rem;font-weight: 400;-webkit-transform: translate3d(0,-.02rem,0);transform: translate3d(0,-.02rem,0);
        }
        .commission-container .goods-list-block li .btn span.tobuy:after {
            content: "";display: inline-block;width: .08rem;height: .08rem;border-top: .02rem solid #fff;border-right: .02rem solid #fff;
            -webkit-transform: rotate(45deg) translateY(-.06rem);-ms-transform: rotate(45deg) translateY(-.06rem);
            transform: rotate(45deg) translateY(-.06rem);translate: .02rem;
        }
        .commission-container .no-goods{
            font-size: .28rem;color: #888;text-align: center;
        }
   </style>
</head>

<body>         
    <div class="commission-container" id="commission"> 
        <p class="main-title">高佣精选</p>

        <div class="main-content">
            
            <img :src="banner" alt="" class="banner">

            <div class="swiper-container top-nav">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" :class="actIndex==index?'act':''" v-for="(item,index) in cateList" :key="index" @click="chooseCate(index,item.id)">{{item.cateName}}</div>
                </div>  
            </div>

            <div class="swiper-container goods-block">
                <div class="swiper-wrapper">
                        <ul class="goods-list-block swiper-slide swiper-no-swiping" v-for="(item,index) in cateList" :key = "index" :data-cid="item.id">

                                <li v-for = "(x,y) in goodsList" :key="y" @click="handleCdetailFavorite(x)">
                                    <a href="javascript:void(0)">
                                        <div class="productImg">
                                            <div class="imgPerch">
                                                <img :src="`http:${x.pic}_310x310.jpg`" class="fadeIn " height="200" width="200">
                                            </div>
                                        </div>
                                        <div>
                                            <div class="title">
                                                <div class="shoplabel undefined">
                                                    <img src="">
                                                </div>
                                                <span>{{x.title}}</span>
                                            </div>
                                            <div style="display: flex; margin-bottom: 12px; align-items: center;">
                                                <div class="coupon">
                                                    <span>券</span>{{x.quanJine}}元
                                                </div>
                                            </div>
                                            <div class="price"><span>¥</span><span class="juanPrice">{{x.jiage}}</span><span>活动价</span><span class="originPrice">¥{{x.yuanjia}}</span></div>
                                            <div class="shopName"><span>{{x.shopName}}</span></div>
                                            <div class="btn"><span class="tobuy">去购买</span><span>{{x.xiaoliang}}人已购</span></div>
                                        </div>
                                    </a>
                                </li>
                                <p class="no-goods" v-if="nomore">没有更多数据了</p>

                        </ul>
                </div>
               
            </div>

        </div>
        

    </div>
      
</body>

<script>
    (function(){
        var size = (document.body.clientWidth || document.documentElement.clientWidth);
        document.documentElement.style.fontSize = (size > 750 ? 750 : size) / 7.5 + 'px';
    })();



    new Vue({
        el: '#commission',
        data(){
            return{
                banner:'',
                cateList:[],
                localGoodsList:[],
                goodsList:[],
                actIndex:0,
                sys:false,
                nowPage:1,
                canScroll:false,
                tabIndex:'',
                loadData:false,
                nomore:false,
            }
        },
        methods:{
            handleCdetailFavorite: function (items) {
                if(_config.jumpGoodsUrl){
                    _config.jumpGoodsUrl(items);
                }
                var params = {
                        site_id:this.sys.uid,
                        
                        pid:this.sys.pid,
                        goodsid:items.itemId,
                        need_tpwd:1,
                        gid:items.gid,
                        is_auto_quan:1,
                        d_title:items.dtitle,
                        need_short_link:1,
                    };


                if(this.sys.channel_id){
                    params.relationId =this.sys.channel_id;
                }

                return new taobaoCode({
                    type:1, // type=>1 商品转链  2 活动转链  3自定义跳转
                    ua:['MicroMessenger','WeiBo'], // 定制 UA  ua => [true]不跳转复制淘口令模式
                    modelType:0 , // 0 => 默认成功失败提示 modelType => 1 超级红包 2 =>会场弹窗 （判断类型 默认不传，用途复制成功提示文案判断）
                    isRedPacket:false, // isRedPacket => true 开启红包流程  isRedPacket=> 关闭红包流程 （是否开启红包弹窗流程）
                    params:params, 
                    regCode:/\#(.*?)\#/, //替换正则 默认 #淘口令#
                    template:"优惠已生成，复制本段文字¥#淘口令#¥，打开淘宝APP领券购买",//替换模版
                });
            },
      
            cateRender(){//渲染nav swiper
                 mySwiper = new Swiper ('.top-nav', {
                    slidesPerView: 'auto',  
                    initialSlide: 0,
                    paginationClickable: true,
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,//修改swiper的父元素时，自动初始化swiper
                })

            },
            goodsListRender(cid){
                listSwiper = new Swiper ('.goods-block', {
                    initialSlide: 1,
                    loop:false,
                    paginationClickable: true,
                    observer:true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents:true,//修改swiper的父元素时，自动初始化swiper
                    // autoHeight:true,
                    on: {
                        init: function(){
                            this.slideTo($('.goods-list-block[data-cid="'+cid+'"]').index(), 300, false)
                        }, 
                    },
                })
            },
            chooseCate(index,cid){//选择分类
                mySwiper.slideTo(index-2, 500, false)
                this.actIndex = index;
                this.tabIndex = cid;
                this.getGoodsList(cid)
                this.goodsListRender(cid)
                this.nomore = false

            },
            getCateList(){//获取分类列表
                var _this = this;
                $.ajax({
                    url:'https://cmsjapi.dataoke.com/api/category/single/page/get-single-page?pageId=9&tuserId=1&entityId=',
                    type:"get",
                }).done(function(res){
                    if(res.code == 0){
                        _this.banner = res.data.banner
                        _this.cateList = res.data.categoryRespVOS
                    }
                    setTimeout(function(){
                        _this.cateRender();
                        _this.getGoodsList(_this.cateList[0].id)
                        _this.tabIndex = _this.cateList[0].id;
                        _this.goodsListRender(_this.cateList[0].id)
                    },10)
                })
            },
            getGoodsList(cid,page){//获取商品列表
                cid = cid || 0;
                page = page || 1;
                var _this = this;

                $.ajax({
                    url:'https://cmsjapi.dataoke.com/api/category/single/page/get-goods-by-categoryId?categoryId='+cid+'&pageNo='+page+'&pageSize=10&singlePageId=9&appKey='+_config.appKey,
                    type:"get",      
                }).done(function(res){
                    if(res.code == 0){
                        if(_this.loadData == true){
                            _this.goodsList = _this.goodsList.concat(res.data.lists);
                        }else{
                            _this.goodsList = res.data.lists;
                        }
                        _this.sys = res.data.sys;
                        _this.loadData = false;
                        if(res.data.lists.length!=0){
                            _this.canScroll = true   
                        }else{
                            _this.nomore = true;
                        }
                    }                                 
                })
                
             
            },
   
            scrollLoad : function (){//
                var _this = this;
                var range = 70;             //距下边界长度/单位px  
                var totalheight = 0;   
                $(window).scroll(function(){  
                    var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)  
                    totalheight = parseFloat($(window).height()) + parseFloat(srollPos);  

                    if(($(document).height()-range <= totalheight) ) {  
                        if( _this.canScroll){
                            _this.nowPage++; 
                            _this.canScroll = false;
                            _this.loadData = true;
                            _this.getGoodsList(_this.tabIndex, _this.nowPage) 
                        }
                    }  

                });  
            }


        },
        mounted(){
            this.getCateList();
            this.scrollLoad();
        }
    })




  
</script>
</html>
